<template>
  <el-drawer size="100%" :close-on-click-modal="false" :title="title" :model-value="isShow" @open="onOpen"
    @close="onClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="70px">
      <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item style="margin-bottom: 0" label="分类" prop="tagId">
          <ZhongyiComponentsTagTree v-model="form.tagId" type="1" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="药材名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="拼音" prop="pinYin">
            <el-input v-model="form.pinYin" />
          </el-form-item>
        </el-col>
       
      </el-row>
      <el-form-item label="介绍" prop="jieShao">
        <el-input v-model="form.jieShao" type="textarea" :rows="6" />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="药性" prop="yaoXing">
            <el-input v-model="form.yaoXing" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归经" prop="guiJing">
            <el-input v-model="form.guiJing" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="功效" prop="gongXiao">
            <el-input v-model="form.gongXiao" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="应用" prop="yingYong">
        <el-input v-model="form.yingYong" type="textarea" :rows="8" />
      </el-form-item>
      <el-form-item label="用法用量" prop="yongFaYongLiang">
        <el-input v-model="form.yongFaYongLiang" type="textarea" :rows="2" />
      </el-form-item>

      <el-form-item label="使用注意" prop="zhuYi">
        <el-input v-model="form.zhuYi" type="textarea" :rows="6" />
      </el-form-item>


    </el-form>
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onSave">确认</el-button>
    </template>
  </el-drawer>
</template>

<script>
import { getDetail, save } from "@/api/zhongyi/yaocai";

export default {
  components: {  },
  props: {
    data: {
      required: true,
      type: String,
      default: "",
    },
    isShow: {
      require: true,
      type: Boolean,
      default: false,
    },
    title: {
      require: true,
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      rules: {}
    };
  },
  mounted() {

  },
  methods: {
    async onOpen() {
      if (this.data) {
        const user = await getDetail(this.data);
        this.form = user.result;
       // this.form.tagId = this.form.tagList[0].id
        // this.form.roles = user.data.roles
      } else {
        this.form = {
          tagId: "",
          name: "",
          pinYin: "",
          yaoDian: "",
          jieShao: "",
          gongXiao: "",
          yaoXing: "",
          yongFaYongLiang: "",
          zhuYi: "",
          yingYong: ""
        };
      }
    },
    async onSave() {
      //if(this.data) {
      //this.form.tagId = [this.tagId]
       // debugger
      await save(this.form);
      //}
      //else {
      // await addUser(this.form)
      //}
      this.$emit("onChange", this.form);
      this.$emit("update:isShow", false)
    },
    onClose() { 
      this.$emit("update:isShow", false)
    },
  },
  watch: {
    data: async function () { },
  },
};
</script>


